<template>
  <div>
    <el-form :inline="true" v-model="patrolTask" ref="patrolTask" class="my-form" label-width="80px">

      <el-form-item label="任务编号">
        <el-input placeholder="请输入" v-model="patrolTask.id" style="width: 270px"></el-input>
      </el-form-item>

      <el-form-item label="线路编号">
        <el-input placeholder="请输入" v-model="patrolTask.cid" style="width: 270px"></el-input>
      </el-form-item>

      <el-form-item label="任务状态">
        <el-select placeholder="请选择" v-model="patrolTask.state" style="width: 150px" :clearable="true">
          <el-option label="待分配" :value="0"></el-option>
          <el-option label="已分配" :value="1"></el-option>
          <el-option label="执行中" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" v-model="patrolTask" class="my-form" label-width="80px">
      <el-form-item label="下发人">
        <el-input placeholder="请输入" v-model="patrolTask.uname" style="width: 270px"></el-input>
      </el-form-item>

      <el-form-item>
        <div class="block">
          <span class="demonstration">&nbsp;&nbsp;下发日期&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-date-picker
              v-model="patrolTask.firstTime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item>
        <div class="block">
          <span class="demonstration">-&nbsp;&nbsp;&nbsp;</span>
          <el-date-picker
              v-model="patrolTask.lastTime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('patrolTask')">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="getCreateDate" style="display: flex;float: right">制定巡查任务</el-button>

    <!--    制定巡检任务-->
    <el-dialog
        title="制定巡检任务"
        :visible.sync="DVisible"
        width="25%"
        center>
      <el-divider ></el-divider>

      <el-form :model="newPatrolTask" :rules="rules" ref="newPatrolTask" label-width="100px" class="demo-ruleForm">
        <el-form-item label="任务编码" prop="id">
          <el-input v-model="newPatrolTask.id"></el-input>
        </el-form-item>
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="newPatrolTask.name"></el-input>
        </el-form-item>
        <el-form-item label="巡检路线" prop="cid">
          <el-select v-model="newPatrolTask.cid" @change="onChange" placeholder="请选择">
            <el-option v-for="(item,index) in circuitry" :value="item.id" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始杆号" prop="startpoleno">
          <el-select v-model="newPatrolTask.startpoleno" @change="onChange2()" placeholder="请选择">
            <el-option v-for="(item,index) in circuitryPole" :label="item.position+'号 : '+item.poleId"
                       :value="item.position+'*'+item.poleId" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终止杆号" prop="endpoleno">
          <el-select v-model="newPatrolTask.endpoleno" placeholder="请选择">
            <el-option v-for="(item,index) in circuitryPole2" :lable="item.poleId" :value="item.poleId"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下发人" prop="uname">
          <el-input :value="this.$store.state.menus.iUsername" disabled></el-input>
        </el-form-item>
        <el-form-item label="下发日期" prop="ctime">
          <el-input v-model="getDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="newPatrolTask.remarks" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 30px">
          <el-button @click="DVisible = false">取 消</el-button>
          <el-button type="primary" @click="getNewWork('newPatrolTask')">确 定</el-button>
        </el-form-item>

      </el-form>

    </el-dialog>

    <!--    查看巡检任务-->
    <el-dialog
        title="查看巡检任务"
        :visible.sync="DVisible2"
        width="60%"
        center>
      <el-divider ></el-divider>
      <el-descriptions   :column="3" border>
        <el-descriptions-item label="任务编码" label-class-name="my-label" content-class-name="my-content">{{ look.id }}</el-descriptions-item>
        <el-descriptions-item label="任务名称">{{ look.name }}</el-descriptions-item>
        <el-descriptions-item label="巡检路线">{{ look.cid }}</el-descriptions-item>
        <el-descriptions-item label="起始杆号">{{look.startpoleno}}</el-descriptions-item>
        <el-descriptions-item label="终止杆号">{{look.endpoleno}}</el-descriptions-item>
        <el-descriptions-item label="下发人">{{ this.$store.state.menus.iUsername }}</el-descriptions-item>
        <el-descriptions-item label="下发日期">{{look.creartime}}</el-descriptions-item>
        <el-descriptions-item label="备注" v-if="look.remarks!=null" :contentStyle="{'text-align': 'left'}" disabled>{{look.remarks}}</el-descriptions-item>
        <el-descriptions-item label="备注" v-if="look.remarks==null" :contentStyle="{'text-align': 'left'}" disabled>无</el-descriptions-item>
      </el-descriptions>

    </el-dialog>

    <!--    分配巡检任务-->
    <el-dialog
        title="分配巡检任务"
        :visible.sync="DVisible3"
        width="45%"
        style="text-align: center"
        center>
      <el-divider ></el-divider>
      <div style="text-align: center">
        <el-transfer :titles="['巡检员列表','已选择']" style="text-align: left;display: inline-block;" v-model="selectedXJY"
                     direction="vertical" :data="fenPeiXJY"></el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 50%" @click="xjyFenPei">确 定</el-button>
      </span>


    </el-dialog>

<!--    修改巡检任务-->
    <el-dialog
        title="修改巡检任务"
        :visible.sync="DVisible4"
        width="25%"
        style="text-align: center"
        center>
      <el-divider ></el-divider>
      <el-form :model="oldPatrolTask" :rules="rules" ref="oldPatrolTask" label-width="100px" class="demo-ruleForm">
        <el-form-item label="任务编码" prop="id">
          <el-input v-model="oldPatrolTask.id"></el-input>
        </el-form-item>
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="oldPatrolTask.name"></el-input>
        </el-form-item>
        <el-form-item label="巡检员" prop="name">
          <el-input type="textarea" style="width: 200px;" v-model="updateXJY.usersName"></el-input>
          <el-button style="margin-left: 10px" type="danger" @click="update123">修改</el-button>
        </el-form-item>
        <el-form-item label="巡检路线" prop="cid">
          <el-select v-model="oldPatrolTask.cid" @change="onChange3" placeholder="请选择">
            <el-option v-for="(item,index) in circuitry" :value="item.id" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始杆号" prop="startpoleno">
          <el-select v-model="oldPatrolTask.startpoleno" @change="onChange4()" placeholder="请选择">
            <el-option v-for="(item,index) in circuitryPole" :label="item.position+'号 : '+item.poleId"
                       :value="item.position+'*'+item.poleId" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终止杆号" prop="endpoleno">
          <el-select v-model="oldPatrolTask.endpoleno" placeholder="请选择">
            <el-option v-for="(item,index) in circuitryPole2" :lable="item.poleId" :value="item.poleId"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下发人" prop="uname">
          <el-input :value="this.$store.state.menus.iUsername" disabled></el-input>
        </el-form-item>
        <el-form-item label="下发日期" prop="ctime">
          <el-input v-model="getDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="oldPatrolTask.remarks" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 30px">
          <el-button @click="DVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateTK('oldPatrolTask')">确 定</el-button>
        </el-form-item>

      </el-form>


    </el-dialog>

    <!--    表格-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="任务编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="任务名称"
          width="200">
      </el-table-column>
      <el-table-column
          prop="cid"
          label="巡检线路"
          width="150">
      </el-table-column>
      <el-table-column
          prop="startpoleno"
          label="起始杆号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="endpoleno"
          label="终止杆号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="user.name"
          label="下发人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="creartime"
          label="下发时间"
          width="250">
      </el-table-column>
      <el-table-column
          prop="state"
          label="任务状态"
          width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state===0" size="small" type="danger">待分配</el-tag>
          <el-tag v-if="scope.row.state===1" size="small" type="primary">已分配</el-tag>
          <el-tag v-if="scope.row.state===2" size="small" type="warning">执行中</el-tag>
          <el-tag v-if="scope.row.state===3" size="small" type="success">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="endtime"
          label="任务完成时间"
          width="250">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.endtime==null" size="small" type="danger">未完成</el-tag>
          <el-tag v-if="scope.row.endtime!=null" size="small" type="success">{{ scope.row.endtime }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="cancel"
          label="任务是否取消"
          width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cancel===0" size="small" type="danger">已取消</el-tag>
          <el-tag v-if="scope.row.cancel===1" size="small" type="primary">未取消</el-tag>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" @click="fenPei(scope.row.id)" size="small">分配</el-button>
          <el-button type="text" @click="updateTask(scope.row)" size="small">修改</el-button>
          <el-button type="text" @click="cancel(scope.row.id)" size="small">取消</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>


  </div>
</template>

<script>
export default {
  name: "Xjrwdzyfp",

  data() {

    return {
      isUpdate:false,
      selectedPtId: '',
      fenPeiXJY: []
      ,
      selectedXJY: [],
      rules: {
        id: [{required: true, message: '请输入内容', trigger: 'blur'}],
        name: [{required: true, message: '请输入内容', trigger: 'blur'}],
        cid: [{required: true, message: '请输入内容', trigger: 'blur'}],
        startpoleno: [{required: true, message: '请输入内容', trigger: 'blur'}],
        endpoleno: [{required: true, message: '请输入内容', trigger: 'blur'}],
      },

      positionAndPoleId: {
        postion: '',
        poleId: ''
      },
      patrolTask: {
        id: '',
        cid: '',
        state: '',
        firstTime: '',
        lastTime: '',
        uname: ''
      },
      updateXJY:{

      },
      look: {},
      updateT:{},
      getDate: '',
      newPatrolTask: {
        id: '',
        name: '',
        cid: '',
        startpoleno: '',
        endpoleno: '',
        remarks: ''
      },
      oldPatrolTask: {
        id: '',
        name: '',
        cid: '',
        startpoleno: '',
        endpoleno: '',
        remarks: ''
      },
      circuitryPole: [
        {
          id: '',
          poleId: '',
          position: ''
        }
      ],
      circuitryPole2: [
        {
          id: '',
          poleId: '',
          position: ''
        }
      ],
      circuitry: [],
      DVisible: false,
      DVisible2: false,
      DVisible3: false,
      DVisible4: false,

      page: {
        current: 1,
        pageSizes: [5, 8],
        size: 5,
        total: ''
      },
      tableData: [
        {
          user: {}
        }
      ]

    }
  },
  methods: {
    onSubmit(patrolTask) {
      this.getTableData();
      this.page.current = 1;

    },
    fenPei(id) {
      this.DVisible3 = true;
      this.selectedPtId = id;
      this.$axios.post('/nb/patroltask-user/getInspectUser/').then(res => {
        this.fenPeiXJY = res.data.data;
        // console.log(this.fenPeiXJY);
      })
    },
    updateTK(){
      this.oldPatrolTask.startpoleno = this.positionAndPoleId.poleId;
      this.$axios.post('/nb/patroltask/updateTask/',this.oldPatrolTask).then(res=>{
        if(res){
          this.$message.success("修改成功！");
          this.DVisible4 = false;
          this.getTableData();
          // console.log(this.oldPatrolTask.startpoleno)
        }else {
          this.$message.error("修改失败！");
        }
      })
    },
    onChange() {
      this.$axios.post('/nb/circuitry-pole/getCircuitryId/' + this.newPatrolTask.cid).then(res => {
        // console.log(res.data.data);
        this.circuitryPole = res.data.data;
      })
    },
    onChange2() {
      this.circuitryPole2.splice(0, this.circuitryPole2.length);
      this.positionAndPoleId = this.poleIdHandler(this.newPatrolTask.startpoleno);
      let p = this.positionAndPoleId;
      let temp = this.circuitryPole;
      for (let i = 0; i < temp.length; i++) {
        if (temp[i].position > p.postion) {
          this.circuitryPole2.push(temp[i]);
        }
      }
    },
    onChange3() {
      this.$axios.post('/nb/circuitry-pole/getCircuitryId/' + this.oldPatrolTask.cid).then(res => {
        // console.log(res.data.data);
        this.circuitryPole = res.data.data;
      })
    },
    onChange4() {
      this.circuitryPole2.splice(0, this.circuitryPole2.length);
      this.positionAndPoleId = this.poleIdHandler(this.oldPatrolTask.startpoleno);
      let p = this.positionAndPoleId;
      let temp = this.circuitryPole;
      for (let i = 0; i < temp.length; i++) {
        if (temp[i].position > p.postion) {
          this.circuitryPole2.push(temp[i]);
        }
      }
      // console.log(this.circuitryPole2)
    },
    update123(){
      this.selectedXJY.splice(0,this.selectedXJY.length);
      this.fenPeiXJY.splice(0,this.fenPeiXJY.length);
      this.DVisible3 = true;
      this.$axios.post('/nb/patroltask-user/getInspectUser/').then(res => {
        this.fenPeiXJY = res.data.data;
        let c=this.updateXJY.tnspectUserDtos;
        // console.log(c);
        for (let i = 0; i < c.length; i++) {
          this.selectedXJY.push(c[i].key);
        }
        // console.log(this.fenPeiXJY);
      })
    },
    updatePTState(){
      this.$axios.post('/nb/patroltask/updateState/'+this.selectedPtId).then(res =>{
        if (res){
          // console.log(111);
        }else {
          // console.log(222);
        }
      })
    },
    xjyFenPei() {
      if (this.selectedXJY != '') {
        this.fenPeiXJY.splice(0,this.fenPeiXJY.length);
        this.$axios.post('/nb/patroltask-user/savePatrolTaskUser/'+this.selectedPtId,this.selectedXJY).then(res=>{
          if(res.data.data){
            this.$message.success("分配成功！");
            this.selectedXJY.splice(0,this.selectedXJY.length);
            // console.log(this.selectedXJY)
            this.updatePTState();
            this.DVisible3 = false;
            this.getTableData();
          }else {
            this.$message.error("分配失败！");
          }
        })
      } else {
        this.$message.error("请选择巡检员！")
      }

    },
    updateTask(row){
      console.log(this.updateXJY);
      this.selectedPtId = row.id;
      this.DVisible4 = true;
      this.oldPatrolTask = row;
      this.getCreateDate2();
      this.$axios.post('/nb/circuitry-pole/getCircuitryId/' + this.oldPatrolTask.cid).then(res => {
        this.circuitryPole = res.data.data;
      })
      this.$axios.post('/nb/patroltask-user/selUserByTask/' + this.oldPatrolTask.id).then(res => {
        if(res!=null){
          this.updateXJY = res.data.data;
        }else {
          this.$message.error("加载巡检员失败！");
        }

      })
    },
    handleClick(row) {
      // console.log(row);
      this.DVisible2 = true;
      this.look = row;
    },
    getTableData() {
      this.$axios.post('/nb/patroltask/patrolTaskPageMaps/' + this.page.current + '/' + this.page.size, this.patrolTask).then(res => {
        this.tableData = res.data.data.records;
        this.page.total = res.data.data.total;
        // console.log(this.page.current);
      })
    },
    handleSizeChange(res) {
      this.page.size = res
      this.getTableData()
    },
    handleCurrentChange(res) {
      this.page.current = res
      this.getTableData()
    },
    getCreateDate() {
      this.DVisible = true;
      this.getDate = new Date().toLocaleString();
      this.$axios.post('/nb/circuitry/selLineName/').then(res => {
        this.circuitry = res.data.data;
        // console.log(this.circuitry);
      })
    },
    getCreateDate2() {
      this.getDate = new Date().toLocaleString();
      this.$axios.post('/nb/circuitry/selLineName/').then(res => {
        this.circuitry = res.data.data;
        // console.log(this.circuitry);
      })
    },
    getNewWork(newPatrolTask) {
      this.newPatrolTask.startpoleno = this.positionAndPoleId.poleId;
      this.$refs[newPatrolTask].validate((valid) => {
        if (valid) {
          // console.log(this.newPatrolTask);
          this.$axios.post('/nb/patroltask/savePatrolTask', this.newPatrolTask).then(res => {
            if (res.data.data) {
              this.$message.success("添加成功");
              this.DVisible = false;
              this.getTableData();
            } else {
              this.$message.success("添加失败");
            }
          })
        }
      })

    },
    cancel(id){
      this.oldPatrolTask.id = id;
      this.$axios.post('/nb/patroltask-user/cancelTask/',this.oldPatrolTask).then(res=>{
        if(res){
          this.$message.success("取消任务成功!");
          this.getTableData();
        }else {
          this.$message.error("取消任务失败");
        }
      })
    },
    poleIdHandler: function (res) {
      // console.log(res);
      for (let i = 0; i < res.length; i++) {
        let temp = res.substring(i, i + 1)
        if (temp == "*") {
          return {
            postion: res.substr(0, i),
            poleId: res.substr(i + 1)
          }
        }
      }
    }
  },


  created() {

    this.getTableData();

  }

}


</script>

<style scoped>
.my-form {
  display: flex;
  float: left;
}

.el-form-item .el-input {
  width: 200px;
}
</style>